<template>
	<view class="oilcard">
		<view class="head">
			<image src="../../../static/home/youka.jpg" mode=""></image>
		</view>
		<view class="cards" >
					<view >
						<u-subsection  fontSize='30upx' :list="list" :current="current" @change="change1" activeColor='#d11e0d' inactiveColor='#000' bgColor="#fff"></u-subsection>
					</view>
					<view class="setcard">
						<view  class="setcardbtn" >
							<view  @click="addcard()" >添加油卡</view>
						</view>
						<view class="cardmain">
							<view class="cardimg">
								 <image  :src="cardimgurl" mode="" style="width: 100upx;height: 100upx;"></image>
							 </view>
							<view class="cardtext">
								 <view style="font-size: 40upx;font-weight: 600;color:#fff">{{cardname}}</view>
								 <view style="font-size: 34upx;color:#fff">加油卡</view>
							 </view>
							 <view class='cardright'>
								 <image @click="morecard" :src="moreurl" mode="" style="width: 60upx;height: 60upx;background-color: #f1dcb6;border-radius: 999rem;"></image>
							 </view>
						</view>
						<view class="cardnumber">
							{{replaceStr(cardnumber)}}
						</view>
					</view>
					
			</view>

			<view style="margin-top: 40upx;">选择金额</view>
			<view class="pricecard" >
				<view class="prices" @click="addprice(index+1)" v-for="(item,index) in money" 
				:class="moren === index ? 'pricesliang' : 'prices'">
					<view class="prices_top">
						<text style="font-size: 30upx;margin-right: 10upx;">￥</text>
						<text style="font-size: 44upx;">{{item.rmb}}</text>
					</view>
					<view class="prices_bottom">
						{{zhekoujia}}
						<text>
							折
						</text>
					</view>
				</view>
			</view>
			
			<view class="bottom_price">
				<view class="bottom_left">
					<view style="font-size: 28upx;">折后价</view>
					<view style="color: #df852a;"><text >￥</text><text style="font-size: 50upx;">{{sumprice}}</text></view>
				</view>
				<view class="bottom_right">
					<button class="bottom_right_btn" type="default" @click="selectprice()">立即充值</button>
				</view>
			</view>
		
		
		
		<u-popup :show="showbottom" mode="bottom"  @close="close" @open="open" :closeable="true" >
			<view class="poptop" style="">
				请选择支付方式
			</view>
			<view class="popmoney">
				￥{{sumprice}}
			</view>
		    <view style="background-color: #FFFFFF;">
				<view style="padding: 80upx;">
					<u-radio-group
						v-model="priceid"
						:borderBottom="true"
						placement="column"
						iconPlacement="right"
					>
						<u-radio
							labelColor='#000'
							:customStyle="{marginBottom: '16px'}"
							v-for="(item, index) in radiolist7"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-radio>
					</u-radio-group>
				</view>
			<view class="" style="padding: 20upx 40upx;">
				<button class="popbtn" type="default" @click="recharge()" style=" ">确认支付{{sumprice}}</button>
			</view>
			</view>
			</u-popup>
	</view>
</template>

<script>
	import {
		zhekou,
		cardlist,
		yuecard,
		baocard,
		weicard,
		cardmsg
	} from '@/api/oilcard'
	export default {
		data() {
			return {
				money:[
					{rmb:100},
					{rmb:300},
					{rmb:500},
					{rmb:1000},
					{rmb:3000},
					{rmb:5000},
				],
				priceid:null,
				radiolist7: [{
						name: '余额',
						disabled: false
					},
					{
						name: '支付宝',
						disabled: false
					},
					{
						name: '微信',
						disabled: false
					},
				],
				showbottom:false,
				list: ['中国石化', '中国石油'],
				current: 0,
				cardimgurl:'../../../static/tabsIcon/shihua.png',
				moreurl:'../../../static/tabsIcon/more.png',
				cardname:'中国石油',
				cardnumber:'',
				zhekoujia:0,
				cardid:'',
				sumprice:0,
				yemian:0,
				moren:0,
			}
		},
		onLoad(option) {
			if(option.id != null){
				this.cardid = option.id;
				this.cardmsg(this.cardid);
			}else{
				this.minecardlist();
				
			}
			this.zhekou();
			setTimeout(()=>this.addprice(1),250)
			
		},
		methods: {
			// 空格
			replaceStr(str) {
			    return str.replace(/(.{4})/g,'$1    ');
			},
			// 油卡标签切换
			change1(index) {
				this.current = index
				this.cardnumber = '';
				// this.minecardlist(index);
				if(index == 0){
					this.cardimgurl = '../../../static/tabsIcon/shihua.png';
					this.cardname = '中国石化';
				}else{
					this.cardimgurl = '../../../static/tabsIcon/shiyou.png';
					this.cardname = '中国石油';
				}
			},
			// 添加油卡
			addcard(){
				uni.navigateTo({
					url: './addoilCard?type=' + this.current
				})
			},
			// 进入油卡列表
			morecard(){
				uni.navigateTo({
					url: './oilcardlist'
				})
			},
			// 折扣
			zhekou(){
				zhekou().then(res => {
					if (res.success == 1) {
						this.zhekoujia = res.data;
					}
					else{
						uni.showToast({
							title: '查询失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			// 油卡列表
			minecardlist(index){
				let sss = {
					type:index
				}
				cardlist(sss).then(res => {
					if (res.success == 1) {
						this.cardnumber = res.data[0].oilCardNumber;
						this.current = res.data[0].type;
						if(this.current == 0){
							this.cardimgurl = '../../../static/tabsIcon/shihua.png';
							this.cardname = '中国石化';
						}else{
							this.cardimgurl = '../../../static/tabsIcon/shiyou.png';
							this.cardname = '中国石油';
						}
					}
					else{
						uni.showToast({
							title: '查询失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			// 油卡详情
			cardmsg(id){
				cardmsg(id).then(res => {
					if (res.success == 1) {
						this.cardnumber = res.data.oilCardNumber;
						this.current = res.data.type;
						if(this.current == 0){
							this.cardimgurl = '../../../static/tabsIcon/shihua.png';
							this.cardname = '中国石化';
						}else{
							this.cardimgurl = '../../../static/tabsIcon/shiyou.png';
							this.cardname = '中国石油';
						}
					}
					else{
						uni.showToast({
							title: '查询失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			// 充值
			addprice(index){
				let sss = 0
				this.moren = index-1;
				if(index == 1){
					sss	= Number(this.zhekoujia) * Number(100) * Number(0.01)
					this.yemian = 100;
				}else if(index == 2){
					sss = Number(this.zhekoujia) * Number(300) * Number(0.01)
					this.yemian = 300;
				}else if(index == 3){
					sss = Number(this.zhekoujia) * Number(500) * Number(0.01)
					this.yemian = 500;
				}else if(index == 4){
					sss = Number(this.zhekoujia) * Number(1000) * Number(0.01)
					this.yemian = 1000;
				}else if(index == 5){
					sss = Number(this.zhekoujia) * Number(3000) * Number(0.01)
					this.yemian = 3000;
				}else if(index == 6){
					sss = Number(this.zhekoujia) * Number(5000) * Number(0.01)
					this.yemian = 5000;
				}
				console.log(this.sumprice)
				this.sumprice = sss.toFixed(2)
			},
			// 充值弹出层
			selectprice(){
				if(this.yemian == 0 || this.yemian == null || this.yemian == undefined || this.yemian == ''){
					// console.log("拦截");
					uni.showToast({
						title: '请选中金额',
						icon:'none',
						duration: 2000
					});
					return;
				}
				this.showbottom = true;
			},
			// 正式充值
			recharge(){
				if(this.priceid == '余额'){
					this.yue()
				}else if(this.priceid == '微信'){
					this.weicard();
				}else if(this.priceid == '支付宝'){
					this.baocard();
				}
			},
			// 余额支付
			yue(){
				let sss = {
					oilCardId:this.cardid,
					showAmount:this.yemian,
					oilCardDiscount:this.zhekoujia,
				}
				yuecard(sss).then(res => {
					if (res.success == 1) {
						uni.showToast({
							title: '充值成功',
							icon:'success',
							duration: 2000
						});
						this.showbottom = false;
					}
					else{
						uni.showToast({
							title: '充值失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			weicard(){
				let sss = {
					oilCardId:this.cardid,
					showAmount:this.yemian,
					oilCardDiscount:this.zhekoujia,
				}
				weicard(sss).then(res => {
					if (res.success == 1) {
						uni.showToast({
							title: '充值成功',
							icon:'success',
							duration: 2000
						});
						this.showbottom = false;
					}
					else{
						uni.showToast({
							title: '充值失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			// 支付宝
			baocard(){    
				    // uni.requestPayment({
				    //     provider: 'alipay',
				    //     orderInfo:'服务端生成的支付订单信息',
				    //     success: function(res) {
				    //         console.log('success:' + JSON.stringify(res));
				    //     },
				    //     fail: function(err) {
				    //         console.log('fail:' + JSON.stringify(err));
				    //     }
				    // });
				let sss = {
					oilCardId:this.cardid,
					showAmount:this.yemian,
					oilCardDiscount:this.zhekoujia,
				}
				baocard(sss).then(res => {
					if (res.success == 1) {
						// uni.showToast({
						// 	title: '充值成功',
						// 	icon:'success',
						// 	duration: 2000
						// });
						uni.requestPayment({
						    provider: 'alipay',
						    orderInfo:res.data,
						    success: function(res) {
						        console.log('success:' + JSON.stringify(res));
						    },
						    fail: function(err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
						this.showbottom = false;
					}
					else{
						uni.showToast({
							title: '充值失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			open() {
			        // console.log('open');
			      },
			  close() {
				this.showbottom = false
				// console.log('close');
			  }
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color:#F1EFF2
	}
	.oilcard{
		width: 100%;
		.head{
			width: 100%;
			font-size: 0;
			overflow: hidden;
			font-size: 0;
			display: flex;
			align-items: center;
			image {
				width: 100%;
			}
		}
		.cards{
			margin: 20upx;
			// padding: ;
			background-color: #FFF;
			// height: 400upx;
			border-radius: 20upx;
			padding-top: 20upx;
			padding-bottom: 20upx;
		}
		.setcard{
			background:linear-gradient(90deg, #da7b29 0%,#f3ad31 100%); 
			background-color: #f3ad31;
			height: 300upx;
			margin: 20upx;
			border-radius: 20upx; 
			padding-bottom: 40upx;
			.setcardbtn{
				color: #FFFFFF;
				padding-top: 20upx;
				text-align: center;
				font-weight: 600;
				// background-color: #18BC37;
				// height: 200upx;
			}
			.cardmain{
				display: flex;
				margin-top: 20upx;
				align-items: center;
				.cardimg{
					background-color: #FFFFFF;
					border-radius: 999rem;
					overflow: hidden;
					margin-left: 40upx;
				}
				.cardtext{
					width: 55%;
					margin-left: 40upx;
				}
				.cardright{
					margin-left: 40upx;
				}
			}
			.cardnumber{
				color: #FFFFFF;
				margin-top: 40upx;
				margin-left: 40upx;
				word-spacing:20upx;
			}
			
		}
		.pricecard{
			display: flex;
			flex-wrap:wrap;
			margin-top: 20upx;
			justify-content: space-around;
			.prices{
				margin-top: 20upx;
				width: 47%;
				height: 150upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				border: 1upx solid #FFFFFF;
				.prices_top{
					margin-top: 20upx;
					margin-left: 30%;
				}
				.prices_bottom{
					margin-left: 30%;
					padding-left: 10upx;
					font-size: 30upx;
				}
			}
			
			.pricesliang{
				margin-top: 20upx;
				width: 47%;
				height: 150upx;
				background-color: #FFFFFF;
				border: 1upx solid blue;
				border-radius: 20upx;
				.prices_top{
					margin-top: 20upx;
					margin-left: 30%;
				}
				.prices_bottom{
					margin-left: 30%;
					padding-left: 10upx;
					font-size: 30upx;
				}
			}
		}
		.bottom_price{
			display: flex;
			justify-content: space-around;
			margin: 40upx 0;
			border-top: 2upx solid #4D4D4D;
			.bottom_left{
				margin-top: 20upx;			
				width: 40%;
				// background-color: #18BC37;
				padding-left: 30upx;
			}
			.bottom_right{
				margin-top: 30upx;
				width: 60%;
				// background-color: #007AFF;
				// padding: 40upx 20upx;
				.bottom_right_btn{
					width: 300upx;
					background:linear-gradient(#f8d07b 0%,#f49d4e  100%); 
					color: #FFFFFF;
					font-weight: 600;
					padding: 0upx 60upx;
					border-radius: 999rem;
				}
			}
		}
		.poptop{
			padding: 80upx;
			text-align: center;
			font-size: 50upx;
			font-weight: 600;
		}
		.popmoney{
			padding-top: 20upx;
			padding-bottom: 40upx;
			text-align: center;
			font-size: 80upx;
			font-weight: 600;
		}
		.popbtn{
			background:linear-gradient(1800deg, #f7cf7a 0%,#f5a050 100%);
			color: #ffffff;
			font-size: 40upx;
			font-weight: 600;
		}
	}
</style>
